/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../assets/styles/base/colors';
@import '../../../assets/styles/base/variables';

registry {
    height: 95%;
    display: block;
    position: relative;
    $highlighted: #e4e4e4;

    .resource-header {
        min-height: 50px;
        display: flex;
        color: $secondary-text;
    }

    .resource-header-left {
        flex: 1;
        align-self: center;
    }

    button.registry {
        background-color: $white;
        border-color: $white;
        box-shadow: 0 2px 5px -1px $fifth-highlight;

        &:hover {
            background-color: $highlighted;
            border-color: $highlighted;
        }

        &[disabled], &[disabled]:hover {
            background-color: $highlighted;
            border-color: $highlighted;
        }
    }

    .resource-list {
        margin: $space-large 0;

        .id {
            width: 25%;
            padding-bottom: 0.5rem;
        }

        .data {
            width: 75%;
            padding-bottom: 0.5rem;
        }

        .title {
            display: flex;
            padding: 0 $space-medium;

            &.resource-empty {
                border-bottom: 1px solid $fifth-highlight;
            }
        }

        .resource-container {
            background-color: $white;
            margin: $space-smedium 0;
            padding: $space-medium;
            position: relative;
            box-shadow: 0 2px 5px -1px $fifth-highlight;
            border-radius: 4px;

            .resource-content {
                display: flex;

                .resource-icon {
                    margin-left: $space-small;
                }

                &.expanded {
                    pre {
                        overflow: hidden;

                        @include transition(all);
                    }

                    padding-bottom: $space-large;
                }

                pre {
                    margin: 0;
                    margin-top: $space-small;
                    overflow: hidden;

                    @include transition(all);

                    &.gradient, &.tiny-gradient {
                        position: relative;
                    }
                    &.gradient:after, &.tiny-gradient:after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                    }

                    &.gradient:after {
                        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
                        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
                        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
                        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
                        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
                        background: linear-gradient(top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
                    }

                    //needed so you don't see the background change when gradient isn't needed
                    &.tiny-gradient:after {
                        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
                        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%);
                        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%);
                        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%);
                        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%);
                        background: linear-gradient(top, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 1) 100%);
                    }
                }
            }

            button.expand {
                position: absolute;
                left: 40%;
                bottom: 10px;
            }
        }

        &.transaction-list {
            height: calc(100% - 50px);
            position: relative;
            margin-top: 0px;
            margin-left: -$space-large;
            margin-right: -$space-large;
            table {
                display: block; // required to allow seperated tbody scrolling
                height: 100%;
                border-spacing: 0px;

                .normal-column {
                    width: 28%
                }

                .narrow-column {
                    width: 16%;
                    text-align: right;
                }

                thead, tbody {
                    display: block;
                }
                thead.tbody-scrolled {
                    position: relative;
                    z-index: 2;
                    box-shadow: 0px 5px 10px -5px #9e9e9e;
                }
                thead {
                    tr {
                        display: table;
                        width: 100%;
                    }
                }
                tbody {
                    height: calc(100% - 76px);
                    width: 100%;
                    position: absolute;
                    overflow-y: auto;
                    tr {
                        width: 100%;
                        display: table;
                        table-layout: fixed;
                        box-shadow: none;
                        margin-bottom: 0px;
                        &:nth-child(even) {
                            background-color: $third-highlight;
                        }
                    }
                }
                th:first-child,
                td:first-child {
                    padding-left: $space-large;
                }
                th, td {
                    padding: 27px $space-medium;
                }
                a {
                    &:visited {
                        color: #3f55af;
                    }
                }
            }
        }

        .no-resources {
            width: 50%;
            margin: 0 auto;
            text-align: center;

            svg {
                width: 190px;
                height: 220px;
            }
        }
    }
}
